<template>
  <!-- 菜单导航 -->
  <div class="tabs-box">
    <div class="tabs-box-container">
      <div :class="index == 1 ? 'item-selected' : 'item'" @click="tabClick(tabs?.[0]?.rote)">
        <div class="name">{{ tabs?.[0]?.name }}</div>
        <div class="en">{{ tabs?.[0]?.nickname }}</div>
        <div class="line"></div>
      </div>
      <el-divider class="divider" direction="vertical"></el-divider>
      <div :class="index == 2 ? 'item-selected' : 'item'" @click="tabClick(tabs?.[1]?.rote)">
        <div class="name">{{ tabs?.[1]?.name }}</div>
        <div class="en">{{ tabs?.[1]?.nickname }}</div>
        <div class="line"></div>
      </div>
      <el-divider class="divider" direction="vertical"></el-divider>
      <div :class="index == 3 ? 'item-selected' : 'item'" @click="tabClick(tabs?.[2]?.rote)">
        <div class="name">{{ tabs?.[2]?.name }}</div>
        <div class="en">{{ tabs?.[2]?.nickname }}</div>
        <div class="line"></div>
      </div>
    </div>
  </div>
  <!-- 移动端 -->
  <div class="mobile">
    <div class="mobile-container">
      <div :class="index == 1 ? 'item-selected' : 'item'" @click="tabClick(tabs?.[0]?.rote)">
        <div class="name">{{ tabs?.[0]?.name }}</div>
        <!-- <div class="en">{{ tabs?.[0]?.nickname }}</div> -->
        <div class="line"></div>
      </div>
      <el-divider class="divider" direction="vertical"></el-divider>
      <div :class="index == 2 ? 'item-selected' : 'item'" @click="tabClick(tabs?.[1]?.rote)">
        <div class="name">{{ tabs?.[1]?.name }}</div>
        <!-- <div class="en">{{ tabs?.[1]?.nickname }}</div> -->
        <div class="line"></div>
      </div>
      <el-divider class="divider" direction="vertical"></el-divider>
      <div :class="index == 3 ? 'item-selected' : 'item'" @click="tabClick(tabs?.[2]?.rote)">
        <div class="name">{{ tabs?.[2]?.name }}</div>
        <!-- <div class="en">{{ tabs?.[2]?.nickname }}</div> -->
        <div class="line"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: { index: Number },
  data() {
    return {

      tabs: [],
    };
  },

  computed: {},
  created() { },
  mounted() {
    //查询每一个菜单项 避免二级菜单添加多出来问题
    this.tabs.push(this.$utils.getNavClass('innovationBrand'));
    this.tabs.push(this.$utils.getNavClass('innovationScience'));
    this.tabs.push(this.$utils.getNavClass('innovationOverseas'));
  },
  methods: {
    /**跳页**/
    tabClick(rote) {
      this.$router.push({
        name: rote,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .mobile {
    display: none;
  }

  .tabs-box {

    background: #fff;
    width: 100%;
    box-shadow: 0px 2px 38px 0px rgba(0, 0, 0, 0.08);

    &-container {
      @include fn.container;
      height: 96px;
      display: flex;
      justify-content: center;
    }

    .divider {
      margin-top: 23px;
      height: 50px;
    }

    .item {
      cursor: pointer;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 400px;
      height: 96px;

      &:hover {
        .line {
          position: absolute;
          bottom: 0px;

          width: 466px;
          height: 3px;
        }

        .name {
          font-size: 22px;
          color: color.$base;
          font-weight: bold;
        }

        .en {
          font-size: 18px;
          margin-top: 4px;
          color: color.$base;
          font-weight: 500;
          opacity: 0.5;
        }
      }

      .line {
        position: absolute;
        bottom: 0px;

        width: 466px;
        height: 3px;
      }

      .name {
        font-size: 22px;
        color: #666;
        font-weight: bold;
      }

      .en {
        font-size: 18px;
        margin-top: 4px;
        color: #333;
        font-weight: 500;
        opacity: 0.5;
      }
    }
  }

  .item-selected {
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 96px;

    .name {
      font-size: 22px;
      color: color.$base;
      font-weight: bold;
    }

    .line {
      position: absolute;
      bottom: 0px;
      background: color.$base;
      width: 400px;
      height: 3px;
    }

    .en {
      font-size: 18px;
      margin-top: 4px;
      color: color.$base;
      font-weight: 500;
      opacity: 0.5;
    }
  }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .tabs-box {
    display: none;
  }

  .mobile {
    display: flex;
    background: #fff;
    width: fn.rpx(750);
    box-shadow: 0px 2px 38px 0px rgba(0, 0, 0, 0.08);

    &-container {
      width: 100%;
      height: fn.rpx(96);
      display: flex;
      justify-content: center;
    }

    .divider {
      margin-top: fn.rpx(23);
      height: fn.rpx(50);
    }

    .item {
      cursor: pointer;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: fn.rpx(250);
      height: fn.rpx(96);

      .line {
        position: absolute;
        bottom: 0px;

        width: fn.rpx(250);
        height: fn.rpx(3);
      }

      .name {
        font-size: fn.rpx(26);
        color: #666;
        font-weight: bold;
      }

      .en {
        font-size: fn.rpx(18);
        margin-top: fn.rpx(4);
        color: #333;
        font-weight: 500;
        opacity: 0.5;
      }
    }


    .item-selected {
      cursor: pointer;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: fn.rpx(250);
      height: fn.rpx(96);

      .name {
        font-size: fn.rpx(26);
        color: color.$base;
        font-weight: bold;
      }

      .line {
        position: absolute;
        bottom: 0px;
        background: color.$base;
        width: fn.rpx(250);
        height: fn.rpx(3);
      }

      .en {
        font-size: fn.rpx(18);
        margin-top: fn.rpx(4);
        color: color.$base;
        font-weight: 500;
        opacity: 0.5;
      }
    }
  }
}
</style>